AngularJS Application
এটি একটি বাস্তব AngularJS অ্যাপ্লিকেশন তৈরি করার সময়।
একটি কেনাকাটার তালিকা তৈরি করুন
আপনি একটি শপিং তালিকা তৈরি করতে কিছু AngularJS বৈশিষ্ট্য ব্যবহার করতে পারেন যেখানে আপনি আইটেমগুলি যোগ করতে বা সরাতে পারেন:
আমার কেনাকাটা তালিকা
- দুধ×
- রুটি×
- পনির×
আবেদন বিবরণ
ধাপ 1. শুরু করা:
myShoppingList নামে একটি অ্যাপ্লিকেশন তৈরি করে শুরু করুন এবং এতে myCtrl নামক একটি নিয়ামক যুক্ত করুন।
কন্ট্রোলার বর্তমান $স্কোপে একটি অ্যারে নামের পণ্য যোগ করে।
HTML-এ, আমরা অ্যারের উপাদান ব্যবহার করে একটি তালিকা প্রদর্শন করতে ng-repeat নির্দেশ ব্যবহার করি।
উদাহরণ
এখন পর্যন্ত আমরা একটি দলের আইটেমগুলির উপর ভিত্তি করে একটি HTML তালিকা তৈরি করেছি:
<script> var অ্যাপ = angular.module("myShoppingList", []); app.controller("myCtrl", ফাংশন($স্কোপ) { $scope.products = ["দুধ", "রুটি", "পনির"]; }); </script> <div ng-app="myShoppingList" ng-controller="myCtrl"> <ul><li> <li ng-repeat="x in products">{{x}}</li> </ul> </div>মনে রাখার জন্য:
ng-repeat প্রতিটি উপাদানের জন্য একটি HTML উপাদান পুনরাবৃত্তি করে। এটি AngularJS এর অন্যতম শক্তিশালী বৈশিষ্ট্য।
ধাপ 2. উপাদান যোগ করা:
এইচটিএমএল-এ, একটি পাঠ্য ক্ষেত্র যোগ করুন এবং এটিকে এনজি-মডেল নির্দেশের সাথে অ্যাপ্লিকেশনের সাথে সংযুক্ত করুন।
কন্ট্রোলারে, addItem নামে একটি ফাংশন তৈরি করুন এবং addMe ইনপুট ক্ষেত্রের মান ব্যবহার করে পণ্য অ্যারেতে একটি আইটেম যোগ করুন।
একটি বোতাম যোগ করুন এবং একটি এনজি-ক্লিক নির্দেশিকা জারি করুন যা বোতামটি ক্লিক করার সময় addItem ফাংশনটি কার্যকর করে।
উদাহরণ
এখন আমরা আমাদের কেনাকাটার তালিকায় আইটেম যোগ করতে পারি:
<script> var অ্যাপ = angular.module("myShoppingList", []); app.controller("myCtrl", ফাংশন($স্কোপ) { $scope.products = ["দুধ", "রুটি", "পনির"]; $scope.addItem = ফাংশন () { $scope.products.push($scope.addMe); } }); </script> <div ng-app="myShoppingList" ng-controller="myCtrl"> <ul><li> <li ng-repeat="x in products">{{x}}</li> </ul> <ইনপুট ng-model="addMe"> <button ng-click="addItem()">যোগ করুন</button> </div>দ্রষ্টব্য:
ng-মডেল নির্দেশিকা একটি AngularJS মডেলের সাথে একটি পাঠ্য ক্ষেত্রকে আবদ্ধ করে। ng-ক্লিক বোতাম ক্লিকে সাড়া দেয়।
ধাপ 3. আইটেম মুছে ফেলা:
আমরা কেনাকাটার তালিকা থেকে আইটেমগুলিও সরাতে পারি।
কন্ট্রোলারে, রিমুভ আইটেম নামে একটি ফাংশন তৈরি করুন যা একটি প্যারামিটার হিসাবে আইটেমের সূচীটি সরানো হবে।
HTML-এ, প্রতিটি আইটেমের জন্য একটি <span> উপাদান তৈরি করুন এবং একটি ng-ক্লিক নির্দেশিকা পাস করুন যা বর্তমান $index-এর সাথে removeItem ফাংশনকে কল করে।
উদাহরণ
এখন আমরা আমাদের কেনাকাটার তালিকা থেকে আইটেমগুলি সরাতে পারি:
<script> var অ্যাপ = angular.module("myShoppingList", []); app.controller("myCtrl", ফাংশন($স্কোপ) { $scope.products = ["দুধ", "রুটি", "পনির"]; $scope.addItem = ফাংশন () { $scope.products.push($scope.addMe); } $scope.removeItem = ফাংশন (x) { $scope.products.splice(x, 1); } }); </script> <div ng-app="myShoppingList" ng-controller="myCtrl"> <ul><li> <li ng-repeat="x in products"> {{x}}<span ng-click="removeItem($index)">×</span> </li> </ul> <ইনপুট ng-model="addMe"> <button ng-click="addItem()">যোগ করুন</button> </div>বর্ণনা:
$index হল একটি বিশেষ ভেরিয়েবল যা ng-repeat দ্বারা প্রত্যাবর্তিত হয় যাতে বর্তমান পুনরাবৃত্তি সূচক রয়েছে।
ধাপ 4. ত্রুটি হ্যান্ডলিং:
অ্যাপটিতে কিছু বাগ রয়েছে, উদাহরণস্বরূপ আপনি যদি একই আইটেমটি দুবার যোগ করার চেষ্টা করেন তবে অ্যাপটি ক্র্যাশ হয়ে যায়।
এছাড়াও, খালি আইটেম যোগ করার অনুমতি দেওয়া উচিত নয়।
আমরা নতুন বস্তু যোগ করার আগে মান পরীক্ষা করে এটি ঠিক করি।
HTML-এ, আমরা ত্রুটি বার্তাগুলির জন্য একটি ধারক যুক্ত করি এবং যখন কেউ একটি বিদ্যমান বস্তু যুক্ত করার চেষ্টা করে তখন একটি ত্রুটি বার্তা লিখি।
উদাহরণ
ত্রুটি বার্তা লেখার বিকল্প সহ কেনাকাটার তালিকা:
<script> var অ্যাপ = angular.module("myShoppingList", []); app.controller("myCtrl", ফাংশন($স্কোপ) { $scope.products = ["দুধ", "রুটি", "পনির"]; $scope.addItem = ফাংশন () { $scope.errortext = ""; যদি (!$scope.addMe) {রিটার্ন;} যদি ($scope.products.indexOf($scope.addMe) == -1) { $scope.products.push($scope.addMe); } অন্য { $scope.errortext = "এই আইটেমটি ইতিমধ্যেই আপনার কেনাকাটার তালিকায় রয়েছে।"; } } $scope.removeItem = ফাংশন (x) { $scope.errortext = ""; $scope.products.splice(x, 1); } }); </script> <div ng-app="myShoppingList" ng-controller="myCtrl"> <ul><li> <li ng-repeat="x in products"> {{x}}<span ng-click="removeItem($index)">×</span> </li> </ul> <ইনপুট ng-model="addMe"> <button ng-click="addItem()">যোগ করুন</button> <p>{{errortext}}</p> </div>ত্রুটি হ্যান্ডলিং:
The indexOf() method checks if the object already exists in the list. splice() পদ্ধতিটি অ্যারে থেকে বস্তুটিকে সরিয়ে দেয়।
ধাপ 5. ডিজাইন:
অ্যাপ্লিকেশন কাজ করে, কিন্তু একটি ভাল নকশা ব্যবহার করতে পারে.
আমরা আমাদের অ্যাপ্লিকেশন ডিজাইন করতে W3.CSS স্টাইলশীট ব্যবহার করি।
W3.CSS , , .
উদাহরণ
W3.CSS :
<link rel="stylesheet" href="https://www.jassifteam.com/w3css/4/w3.css">সম্পূর্ণ শপিং লিস্ট অ্যাপ
<!DOCTYPE html> <html> <মাথা> <title>শপিং লিস্ট - জসিফ টিম</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <link rel="stylesheet" href="https://www.jassifteam.com/w3css/4/w3.css"> <স্টাইল> শরীর { font-family: Arial, sans-serif; প্যাডিং: 20px; } কেনাকাটার তালিকা { সর্বোচ্চ-প্রস্থ: 400px; মার্জিন: 0 অটো; } তালিকা-আইটেম { প্যাডিং: 10px; বর্ডার-নিচ: 1px কঠিন #ddd; প্রদর্শন: flex; justify-content: স্থান-এর মধ্যে; align-items: কেন্দ্র; } .remove-btn { রঙ: লাল; কার্সার: পয়েন্টার; ফন্ট-আকার: 20px; font-weight: গাঢ়; } ত্রুটি { রঙ: লাল; মার্জিন-টপ: 10px; } </style> </head> <body ng-app="myShoppingList" ng-controller="myCtrl">৷ <div class="w3-container w3-card-4 shopping-list"> <h2 class="w3-text-blue">আমার কেনাকাটার তালিকা</h2> <div class="w3-section"> <ইনপুট ক্লাস="w3-ইনপুট w3-বর্ডার" ng-model="addMe" স্থানধারক="নতুন আইটেম লিখুন...">৷ <বোতাম ক্লাস="w3-বোতাম w3-নীল w3-মার্জিন-টপ" ng-click="addItem()"> আইটেম যোগ করুন </ বোতাম> </div> <ul class="w3-ul"> <li class="w3-display-container list-item" ng-repeat="x in products"> {{x}} <span class="w3-display-right remove-btn" ng-click="removeItem($index)"> × </span> </li> </ul> <div class="w3-panel w3-red error" ng-show="errortext"> {{errortext}} </div> </div> <script> var অ্যাপ = angular.module("myShoppingList", []); app.controller("myCtrl", ফাংশন($স্কোপ) { $scope.products = ["দুধ", "রুটি", "পনির"]; $scope.addItem = ফাংশন () { $scope.errortext = ""; যদি (!$scope.addMe) { $scope.errortext = "অনুগ্রহ করে একটি বস্তু লিখুন।"; প্রত্যাবর্তন } যদি ($scope.products.indexOf($scope.addMe) == -1) { $scope.products.push($scope.addMe); $scope.addMe = ""; // ইনপুট ক্ষেত্র সাফ করতে } অন্য { $scope.errortext = "এই আইটেমটি ইতিমধ্যেই আপনার কেনাকাটার তালিকায় রয়েছে।"; } }; $scope.removeItem = ফাংশন (সূচক) { $scope.errortext = ""; $scope.products.splice(সূচক, 1); }; }); </script> </body> </html>অনুশীলন করুন
নীচের টিউটোরিয়ালে অ্যাঙ্গুলারজেএস অ্যাপ্লিকেশন ডেভেলপমেন্ট সম্পর্কে আপনার বোঝার পরীক্ষা করুন:
AngularJS অ্যাপ্লিকেশন টিউটোরিয়াল
আমরা যা শিখেছি
মডিউল তৈরি
angular.module() AngularJS
কন্ট্রোলার
app.controller()
ডেটা বাইন্ডিং
এনজি-মডেলের মাধ্যমে এইচটিএমএল উপাদানগুলিকে $স্কোপ ভেরিয়েবলে বাঁধাই
ঘটনা
এনজি-ক্লিক ব্যবহার করে ক্লিক ইভেন্ট পরিচালনা করা
পরবর্তী পদক্ষেপ
অ্যাপটি আপগ্রেড করুন:
এই কেনাকাটার তালিকা অ্যাপ আপগ্রেড করার চেষ্টা করুন:
- আইটেম পরিমাণ এবং মূল্য যোগ করুন
- মোট খরচ হিসাব করুন
- আইটেম শ্রেণীবদ্ধ করুন
- আইটেম জন্য অনুসন্ধান
- লোকাল স্টোরেজে ডেটা সংরক্ষণ করুন